<form [nzLayout]="'inline'" nz-form class="ant-advanced-search-form">
      <nz-form-item>
        <nz-form-label>{{l("username")}}</nz-form-label>
        <nz-form-control>
          <input type="text" [(ngModel)]="keyword" nz-input [ngModelOptions]="{standalone: true}" [placeholder]="l('please_enter_username')">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>{{l("user_role")}}</nz-form-label>
        <nz-form-control>
          <nz-select name="select-1" [(ngModel)]="roleId" [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="l('please_select_role')">
            <nz-option [nzValue]="''" [nzLabel]="l('please_select_role')"></nz-option>
            <nz-option *ngFor="let option of roles" [nzValue]="option.id" [nzLabel]="option.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>{{l('start_end_time')}}</nz-form-label>
        <nz-form-control>
          <nz-input-group>
            <nz-range-picker [(ngModel)]="dateRange" nzShowTime [ngModelOptions]="{standalone: true}" (ngModelChange)="onChange($event)"></nz-range-picker>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
    <nz-form-item class="control-area">
      <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
      <button nz-button (click)="reset()">{{l('reset')}}</button>
    </nz-form-item>
</form>

<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1000px'}" [nzFrontPagination]="false" [nzData]="tableHelper.items"
  [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount" [(nzPageIndex)]="tableHelper.pageIndex"
  [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize" (nzPageIndexChange)="load()" (nzPageSizeChange)="load()">
  <thead>
    <tr>
      <th nzWidth="100px" nzLeft="0px">{{l('serial_number')}}</th>
      <th>{{l('operation_time')}}</th>
      <th>{{l('username')}}</th>
      <th>{{l('user_role')}}</th>
      <th>{{l('description')}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td nzLeft="0px">{{i++1}}</td>
      <td>{{data.creationTime|momentFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
      <td>{{data.userName}}</td>
      <td>{{data.roleName}}</td>
      <td>
        <span *ngIf="data.description.indexOf(':')>-1">
            {{data.description.split(':')[0]}}:{{l(data.description.split(':')[1])}}
        </span>
        <span *ngIf="data.description.indexOf(':')==-1">
            {{data.description}}
        </span>

      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>
